// 1引入创建上下文的函数
import React, { Component, createContext } from 'react';

// 2 通过createContext创建上下文
let {
  Provider, //提供值
  Consumer //获取值
} = createContext();
class Demo extends Component {

  render() {
    return <div>
      <h1>Demo组件</h1>
      <DemoChild></DemoChild>
    </div>
  };
};
class DemoChild extends Component {
  render() {
    return(
      <Consumer>
        {({msg,handleClick})=>{
          return <div>
            <h1>DemoChild组件:{msg}</h1>
            <button onClick={()=>{
              handleClick();
            }}>变化</button>
          </div>
        }}
      </Consumer>
    )
  }
}

class App extends Component {
  state = {
    msg: "(^OO^)"
  };
  handleClick = (params) => {
    this.setState({
      msg:"(!_!)"
    })
  }
  render() {
    return (
      <div>
        <Provider value={{
          msg: this.state.msg,
          handleClick:this.handleClick
        }}>
          <Demo></Demo>

        </Provider>

      </div>
    );
  };
};

export default App;
